{% extends "base.html" %}

{% block title %}Обращение{% endblock %}

{% block content %}
<div class="container appeal-detail-container">
    <h2>Обращение №{{ appeal.ticket_id }}</h2>
    <p><strong>Статус:</strong> В обработке</p>

    <form action="{{ url_for('update_appeal_type', appeal_id=appeal.ticket_id) }}" method="post">
        <label for="category">Изменить категорию обращения:</label>
        <select name="category" id="category">
            <option value="Замечание" {% if appeal.category=="Замечание" %}selected{% endif %}>Замечание</option>
            <option value="Рекомендация" {% if appeal.category=="Рекомендация" %}selected{% endif %}>Рекомендация</option>
        </select>
        <button type="submit">Обновить</button>
    </form>

    <div class="chat-window" id="chat-window">
        {% for message in messages %}
        <div class="chat-message {% if message.operator_id == operator_id %}user-message{% else %}support-message{% endif %}">
            <p><strong>{{ message.sender }}</strong></p>
            <p>{{ message.message }}</p>
            {% if message.promo_code %}
            <p>Промокод: {{ message.promo_code }}</p>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <div class="send-message-container">
        <textarea id="message-text" rows="3" placeholder="Введите ваше сообщение здесь..."></textarea>
        <button onclick="sendMessage({{ appeal.ticket_id }})">Отправить</button>
    </div>

    <div class="promo-container">
        <button id="add-promo-button" onclick="addPromocode({{ appeal.ticket_id }})">Добавить промокод</button>
    </div>

    <div class="actions-container">
        <button id="close-appeal-button" onclick="closeAppeal({{ appeal.ticket_id }})">Закрыть обращение</button>
        <button id="transfer-appeal-button" onclick="openTransferModal({{ appeal.ticket_id }})">Перевести на другого оператора</button>
        <button id="add-breakdown-button" onclick="openBreakdownModal()">Добавить информацию о неисправности</button>
    </div>
</div>

<!-- Модальное окно для передачи обращения -->
<div id="transferModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeTransferModal()">&times;</span>
        <h2>Выберите нового оператора</h2>
        <form id="transferForm" action="{{ url_for('transfer_appeal', appeal_id=appeal.ticket_id) }}" method="post">
            <label for="new_operator_id">Новый оператор:</label>
            <select name="new_operator_id" id="new_operator_id" required>
                <!-- Здесь будут добавлены операторы через JavaScript -->
            </select>
            <button type="submit">Перевести обращение</button>
        </form>
    </div>
</div>

<!-- Модальное окно для добавления информации о неисправности -->
<div id="breakdownModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeBreakdownModal()">&times;</span>
        <h2>Добавить информацию о неисправности</h2>
        <form id="breakdownForm" action="{{ url_for('create_breakdown', appeal_id=appeal.ticket_id) }}" method="post">
            <div class="form-group">
                <label for="item_id">ID элемента: <span class="required">*</span></label>
                <input type="number" name="item_id" id="item_id" required>
            </div>

            <div class="form-group">
                <label for="breakdown_type">Тип неисправности: <span class="required">*</span></label>
                <input type="text" name="breakdown_type" id="breakdown_type" required>
            </div>

            <div class="form-group">
                <label for="description">Описание: <span class="required">*</span></label>
                <textarea name="description" id="description" rows="3" required></textarea>
            </div>
            <button type="submit">Добавить</button>
        </form>
    </div>
</div>

<script>
    function sendMessage(appealId) {
        var messageText = document.getElementById('message-text').value;
        if (messageText.trim()) {
            fetch(`/send_message/${appealId}`, {
                method: 'POST',
                body: new URLSearchParams({ 'message': messageText }),
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert('Сообщение успешно отправлено!');
                    window.location.href = `/appeal/${appealId}`;
                } else {
                    alert('Произошла ошибка при отправке сообщения.');
                }
            })
            .catch(error => {
                console.error('Ошибка: ', error);
                alert('Произошла ошибка при отправке сообщения.');
            });
        }
    }

    function addPromocode(appealId) {
        var promoButton = document.getElementById('add-promo-button');
        promoButton.disabled = true;
        promoButton.textContent = 'Добавление...';

        fetch(`/add_promocode/${appealId}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                var promoInfo = document.createElement('div');
                promoInfo.textContent = 'Промокод добавлен: ' + data.promo_code;
                document.querySelector('.promo-container').appendChild(promoInfo);

                promoButton.style.backgroundColor = '#ccc';
                promoButton.style.color = '#666';
                promoButton.textContent = 'Промокод добавлен';
            } else {
                promoButton.disabled = false;
                promoButton.textContent = 'Добавить промокод';
                alert('Произошла ошибка при добавлении промокода.');
            }
        })
        .catch(error => {
            console.error('Ошибка: ', error);
            alert('Ошибка при выполнении запроса.');
            promoButton.disabled = false;
            promoButton.textContent = 'Добавить промокод';
        });
    }

    function closeAppeal(appealId) {
        if (confirm('Вы уверены, что хотите закрыть обращение?')) {
            fetch(`/close_appeal/${appealId}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            })
            .then(response => {
                if (response.redirected) {
                    window.location.href = response.url;
                } else {
                    alert('Произошла ошибка при закрытии обращения.');
                }
            })
            .catch(error => {
                console.error('Ошибка: ', error);
                alert('Ошибка при выполнении запроса.');
            });
        }
    }

    function openTransferModal(appealId) {
        fetch(`/available_operators/${appealId}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    var operators = data.operators;
                    var select = document.getElementById('new_operator_id');
                    select.innerHTML = '';
                    operators.forEach(function (operator) {
                        var option = document.createElement('option');
                        option.value = operator.id;
                        option.text = operator.username;
                        select.appendChild(option);
                    });
                    document.getElementById('transferModal').style.display = 'block';
                } else {
                    alert('Произошла ошибка при получении списка операторов.');
                }
            })
            .catch(error => {
                console.error('Ошибка: ', error);
                alert('Ошибка при выполнении запроса.');
            });
    }

    function closeTransferModal() {
        document.getElementById('transferModal').style.display = 'none';
    }

    function openBreakdownModal() {
        document.getElementById('breakdownModal').style.display = 'block';
    }

    function closeBreakdownModal() {
        document.getElementById('breakdownModal').style.display = 'none';
    }

    // Закрытие модального окна при клике вне его
    window.onclick = function (event) {
        var transferModal = document.getElementById('transferModal');
        var breakdownModal = document.getElementById('breakdownModal');
        if (event.target == transferModal) {
            transferModal.style.display = 'none';
        }
        if (event.target == breakdownModal) {
            breakdownModal.style.display = 'none';
        }
    }
</script>

<style>
    /* Стили для модальных окон */
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
        background-color: #fefefe;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 600px;
        border-radius: 10px;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .required {
        color: red;
    }

    .modal-buttons {
        display: flex;
        justify-content: space-between;
    }

    .modal-buttons button {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .modal-buttons .cancel {
        background-color: #ccc;
    }

    .modal-buttons .cancel:hover {
        background-color: #bbb;
    }

    .modal-buttons button[type="submit"] {
        background-color: #4CAF50;
        color: white;
    }

    .modal-buttons button[type="submit"]:hover {
        background-color: #45a049;
    }

    .actions-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .actions-container button {
        flex-grow: 1;
        flex-basis: 30%;
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .actions-container button:hover {
        background-color: #0056b3;
    }
</style>
{% endblock %}
